{extends file="include/base_with_menu.tpl"}

{block name=css}
<style>
    .department_box {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 220px;
    }

    .department_box li {
        margin: 0 3px 3px 3px;
        padding: 0.4em;
        padding-left: 2.5em;
    }

    .department_box li span.move_icon {
        position: absolute;
        margin-left: -2.3em;
    }

</style>
{/block}

{block name="javascript"}
<script type="text/javascript">
(function($)
{
    var sort_options = {
        disabled : false,
        axis : 'y',         // Dragged only vertically
        opacity : 0.6,
        placeholder : 'ui-state-highlight',
    };

    $(function() {
        $('#sortable').sortable(sort_options);

        $('#go_edit').click(function() {
            $('.list_box').hide();
            $('.edit_box').show();
        });

        $('.delete_department').click(function() {
            // TODO: show comfirm
            $(this).parent('.department_item').remove();
        });

        $('#cancel').click(function() {
            window.location.reload();
        });
    });
}
)(jQuery);
</script>
{/block}

{block name="content"}
<div class="layout">
    <a href="/perm/user/department/add/page">添加部门</a>&nbsp;&nbsp;
    <a id="go_edit" href="#">编辑部门</a>
</div>
<h3 class="blockTitle">部门列表</h3>
    {* List department *}
    <div class="layout list_box">
        <ul class="connectedSortable ui-helper-reset department_box">
        {foreach $department_info as $info}
            {if in_array($info.id, $preset_department)}{continue}{/if}
            <li class="ui-state-default">{$info.name|escape}</li>
        {/foreach}
        </ul>
    </div>
    <div class="layout list_box">
        <ul class="connectedSortable ui-helper-reset department_box">
        {foreach $department_info as $info}
            {if in_array($info.id, $preset_department)}
            <li class="ui-state-default">{$info.name|escape}</li>
            {/if}
        {/foreach}
        </ul>
    </div>

    {* Make department into edit model *}
    <form id="edit_form" method="post" action="/perm/user/department/edit">
    <div class="layout edit_box" style="display:none">
        <ul id="sortable" class="connectedSortable ui-helper-reset department_box">
        {foreach $department_info as $info}
            {if in_array($info.id, $preset_department)}{continue}{/if}
            <li class="ui-state-default department_item">
                <span class="ui-icon ui-icon-arrowthick-2-n-s move_icon"> </span>
                <input id="order_{$info.id}" type="text" class="txt01" name="department[{$info.id}]" value="{$info.name|escape}" />
                &nbsp;&nbsp;&nbsp;<a href="#" class="delete_department"><span class="cRed">X</span></a>
            </li>
        {/foreach}
        </ul>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <input type="hidden" name="{$token_name}" value="{$token_hash}" />
        <input type="submit" value="提 交" />
        <input id="cancel" type="button" value="取 消" />
    </div>
    </form>
    <div class="layout edit_box" style="display:none">
        <p class="cGreen">提示:</p>
        <ul class="textLeft tip">
            <li>1. 点击“部门”栏中的“双箭头”符号，拖动当前部门到指定位置.</li>
            <li>2. 直接编辑输入框，修改部门名称.</li>
            <li>3. 点击“部门”栏最右边的<span class="cRed">红色X</span>删除部门</li>
            <li>4. 点击按钮“取消”放弃当前所有修改，返回到部门列表页面.</li>
        </ul>
    </div>
{/block}
